<template>
  <div class="resource-basic-info">
    <!-- 资源头部信息 -->
    <div class="resource-header">
      <div class="resource-info">
        <IconifyIcon
          :icon="resource?.icon || 'ant-design:appstore-outlined'"
          class="resource-icon"
          :style="{ color: resource?.color || '#1890ff' }"
        />
        <div class="resource-details">
          <h2>{{ resource?.name }}</h2>
          <p class="resource-code">{{ resource?.code }}</p>
          <p class="resource-description">{{ resource?.description }}</p>
        </div>
      </div>
      <div class="resource-status">
        <Tag :color="resource?.status === 1 ? 'green' : 'red'">
          {{ resource?.status === 1 ? '启用' : '禁用' }}
        </Tag>
        <Button
          type="primary"
          size="small"
          @click="handleEdit"
          style="margin-left: 8px"
        >
          <IconifyIcon icon="ant-design:edit-outlined" />
          编辑
        </Button>
      </div>
    </div>

    <!-- 资源状态概览 -->
    <ResourceStatusSummary
      :resource-id="resource?.id"
      :resource-type="resource?.resource_type"
      style="margin-top: 16px"
    />

    <!-- 详细信息卡片 -->
    <Row :gutter="16" style="margin-top: 24px">
      <!-- 基本信息卡片 -->
      <Col :span="12">
        <Card title="基本信息" size="small">
          <Descriptions :column="1" size="small">
            <DescriptionsItem label="资源名称">
              {{ resource?.name || '-' }}
            </DescriptionsItem>
            <DescriptionsItem label="资源编码">
              {{ resource?.code || '-' }}
            </DescriptionsItem>
            <DescriptionsItem label="资源类型">
              <Tag :color="getResourceTypeColor(resource?.resource_type)">
                {{
                  resource?.resource_type_name || resource?.resource_type || '-'
                }}
              </Tag>
            </DescriptionsItem>
            <DescriptionsItem label="资源子类型">
              <Tag
                :color="getResourceSubTypeColor(resource?.resource_sub_type)"
              >
                {{
                  resource?.resource_sub_type_name ||
                  resource?.resource_sub_type ||
                  '-'
                }}
              </Tag>
            </DescriptionsItem>
            <DescriptionsItem label="业务类型">
              <Tag :color="getBusinessTypeColor(resource?.business_type)">
                {{
                  resource?.business_type_name || resource?.business_type || '-'
                }}
              </Tag>
            </DescriptionsItem>
            <DescriptionsItem label="资源状态">
              <Tag :color="resource?.status === 1 ? 'green' : 'red'">
                {{ resource?.status === 1 ? '启用' : '禁用' }}
              </Tag>
            </DescriptionsItem>
            <DescriptionsItem label="资源描述">
              {{ resource?.description || '-' }}
            </DescriptionsItem>
          </Descriptions>
        </Card>
      </Col>

      <!-- 层级信息卡片 -->
      <Col :span="12">
        <Card title="层级信息" size="small">
          <Descriptions :column="1" size="small">
            <DescriptionsItem label="层级">
              <Tag :color="getLevelColor(resource?.level)">
                {{ resource?.level || '-' }}
              </Tag>
            </DescriptionsItem>
            <DescriptionsItem label="上级资源">
              {{ resource?.parent_name || '-' }}
            </DescriptionsItem>
            <DescriptionsItem label="资源ID">
              {{ resource?.id || '-' }}
            </DescriptionsItem>
            <DescriptionsItem label="业务ID">
              {{ resource?.business_id || '-' }}
            </DescriptionsItem>
            <DescriptionsItem label="租户ID">
              {{ resource?.tenant_id || '-' }}
            </DescriptionsItem>
          </Descriptions>
        </Card>
      </Col>
    </Row>

    <!-- 时间信息卡片 -->
    <Row :gutter="16" style="margin-top: 16px">
      <Col :span="24">
        <Card title="时间信息" size="small">
          <Row :gutter="16">
            <Col :span="8">
              <Statistic
                title="创建时间"
                :value="formatDateTime(resource?.create_time)"
                :value-style="{ fontSize: '14px' }"
              />
            </Col>
            <Col :span="8">
              <Statistic
                title="更新时间"
                :value="formatDateTime(resource?.update_time)"
                :value-style="{ fontSize: '14px' }"
              />
            </Col>
            <Col :span="8">
              <Statistic
                title="创建者"
                :value="resource?.creator || '-'"
                :value-style="{ fontSize: '14px' }"
              />
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>

    <!-- 资源统计信息 -->
    <Row :gutter="16" style="margin-top: 16px">
      <Col :span="6">
        <Card size="small">
          <Statistic
            title="子资源数量"
            :value="getChildrenCount()"
            :value-style="{ color: '#1890ff' }"
          />
        </Card>
      </Col>
      <Col :span="6">
        <Card size="small">
          <Statistic
            title="能力数量"
            :value="getCapabilitiesCount()"
            :value-style="{ color: '#52c41a' }"
          />
        </Card>
      </Col>
      <Col :span="6">
        <Card size="small">
          <Statistic
            title="属性数量"
            :value="getPropertiesCount()"
            :value-style="{ color: '#722ed1' }"
          />
        </Card>
      </Col>
      <Col :span="6">
        <Card size="small">
          <Statistic
            title="交易记录"
            :value="getTradingCount()"
            :value-style="{ color: '#fa8c16' }"
          />
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import {
  Row,
  Col,
  Card,
  Statistic,
  Button,
  Tag,
  Descriptions,
  DescriptionsItem,
  message,
} from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';
import ResourceStatusSummary from '../../components/ResourceStatusSummary.vue';

interface Resource {
  id?: string | number;
  name?: string;
  code?: string;
  description?: string;
  icon?: string;
  color?: string;
  status?: number;
  resource_type?: string;
  resource_type_name?: string;
  resource_sub_type?: string;
  resource_sub_type_name?: string;
  business_type?: string;
  business_type_name?: string;
  level?: number;
  parent_name?: string;
  business_id?: string;
  tenant_id?: string;
  create_time?: string;
  update_time?: string;
  creator?: string;
  capabilities?: string;
  properties?: string;
  trading?: string;
}

const props = defineProps<{
  resource?: Resource;
}>();

const emit = defineEmits<{
  edit: [resource: Resource];
}>();

// 基础信息相关方法
const handleEdit = () => {
  if (props.resource) {
    emit('edit', props.resource);
  } else {
    message.info('编辑基础信息功能待实现');
  }
};

const formatDateTime = (dateTime?: string) => {
  if (!dateTime) return '-';
  return new Date(dateTime).toLocaleString('zh-CN');
};

const getResourceTypeColor = (type?: string) => {
  switch (type) {
    case 'PHYSICAL':
      return 'blue';
    case 'VIRTUAL':
      return 'cyan';
    case 'SERVICE':
      return 'green';
    case 'DIGITAL':
      return 'purple';
    case 'HUMAN':
      return 'orange';
    default:
      return 'default';
  }
};

const getResourceSubTypeColor = (subType?: string) => {
  switch (subType) {
    case 'BUILDING':
      return 'blue';
    case 'FLOOR':
      return 'cyan';
    case 'ROOM':
      return 'green';
    case 'SOFTWARE':
      return 'purple';
    case 'TEAM':
      return 'orange';
    default:
      return 'default';
  }
};

const getBusinessTypeColor = (businessType?: string) => {
  switch (businessType) {
    case 'HOTEL':
      return 'red';
    case 'APARTMENT':
      return 'green';
    case 'SPA':
      return 'pink';
    case 'SCENIC':
      return 'blue';
    case 'RESTAURANT':
      return 'orange';
    case 'MEDICAL_BEAUTY':
      return 'purple';
    case 'BEAUTY_SALON':
      return 'magenta';
    default:
      return 'default';
  }
};

const getLevelColor = (level?: number) => {
  switch (level) {
    case 1:
      return 'red';
    case 2:
      return 'orange';
    case 3:
      return 'green';
    case 4:
      return 'blue';
    case 5:
      return 'purple';
    default:
      return 'default';
  }
};

const getChildrenCount = () => {
  if (!props.resource) return 0;
  try {
    // 这里可以根据实际数据结构来计算子资源数量
    return 0; // 暂时返回0，后续可以根据API获取
  } catch (error) {
    return 0;
  }
};

const getCapabilitiesCount = () => {
  if (!props.resource?.capabilities) return 0;
  try {
    const capabilities = JSON.parse(props.resource.capabilities);
    if (Array.isArray(capabilities)) {
      return capabilities.length;
    } else if (typeof capabilities === 'object') {
      return Object.keys(capabilities).length;
    }
    return 0;
  } catch (error) {
    return 0;
  }
};

const getPropertiesCount = () => {
  if (!props.resource?.properties) return 0;
  try {
    const properties = JSON.parse(props.resource.properties);
    if (typeof properties === 'object') {
      return Object.keys(properties).length;
    }
    return 0;
  } catch (error) {
    return 0;
  }
};

const getTradingCount = () => {
  if (!props.resource?.trading) return 0;
  try {
    const trading = JSON.parse(props.resource.trading);
    if (trading?.history && Array.isArray(trading.history)) {
      return trading.history.length;
    }
    return 0;
  } catch (error) {
    return 0;
  }
};
</script>

<style scoped>
/* 响应式设计 */
@media (max-width: 768px) {
  .resource-header {
    flex-direction: column;
    gap: 16px;
  }

  .resource-info {
    flex-direction: column;
    text-align: center;
  }

  .resource-status {
    align-self: center;
  }
}

.resource-basic-info {
  padding: 16px;
}

.resource-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 24px;
  background: #fafafa;
  border-radius: 8px;
}

.resource-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.resource-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 48px;
  background: #f0f0f0;
  border-radius: 8px;
}

.resource-details h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #262626;
}

.resource-code {
  margin: 0 0 4px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #8c8c8c;
}

.resource-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #595959;
}

.resource-status {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style>
